import React, { Component } from 'react';
import { Modal, Form, message, Row, Col, Input, Card, Tree, Select } from 'antd';

const FormItem = Form.Item;
const { TreeNode } = Tree;
const { Option } = Select;
export default class DevOta extends Component {
    state = {
        devIdArray: this.props.selectedRows,
    };
    onCheck = checkedKeys => {
        this.setState({ devIdArray: checkedKeys });
    };
    handleSet = () => {
        this.props.form.validateFields((err, values) => {
            if (!err) {
                const { dispatch } = this.props;
                const { otaFileId } = values;
                //const devIds = selectedRows.join(',');
                const devIds = this.state.devIdArray.join(',');
                dispatch({
                    type: 'dev/setOtaFile',
                    payload: { devIds, otaFileId },
                    callback: () => {
                        message.success('设置设备OTA升级成功。');
                    },
                });
                this.props.handleModalVisible(false);
            }
        });
    };

    render() {
        const { modalVisible, form, handleModalVisible, selectedRows, otaFile } = this.props;
        return (
            <Modal
                title="设备OTA升级"
                visible={modalVisible}
                onOk={this.handleSet}
                onCancel={() => handleModalVisible(false)}
            >
                <Form layout="vertical">
                    <FormItem label="升级文件：">
                        {form.getFieldDecorator('otaFileId')(
                            <Select allowClear="true" placeholder="请选择" style={{ width: '100%' }}>
                                {otaFile.map(item => (
                                    <Option value={item.code}>{item.name}</Option>
                                ))}
                            </Select>
                        )}
                    </FormItem>

                </Form>
                <Row style={{ width: '100%' }}>
                    <Card title="设备列表（多选）" bodyStyle={{ height: 600, overflow: 'scroll' }}>
                        {selectedRows.length ? (
                            <Tree
                                checkable
                                style={{ height: 600 }}
                                defaultCheckedKeys={selectedRows}
                                onCheck={this.onCheck}
                            >
                                {selectedRows.map(data => (
                                    <TreeNode title={data} key={data} />
                                ))}
                            </Tree>
                        ) : (
                                '请选择设备'
                            )}
                    </Card>
                </Row>
            </Modal>
        );
    }
}
